<template>
  <div class="join">
    <header-nav :currentIndex="1"></header-nav>
    <div style="display: flex">
      <img
        class="jiaimg"
        src="../../assets/imgs/微信图片_20210925100131.png"
        alt=""
      />
    </div>

    <div class="content">
      <div class="to">
        <div class="to-1">
          <p class="title">互联网平台引爆房产流量传统房产营销急需转型升级</p>
          <div class="gang-1"></div>
          <p class="ti-1">进入新互联网时代，流量为王</p>
          <p class="ti-1">唯有拥抱新流量平台，才能活的更久更好</p>
        </div>
        <div class="to-2">
          <p class="ti-2">2021年6月</p>
          <p class="ti-3">中国网民10.11亿</p>
          <p class="ti-3">短视频用户8.88亿</p>
          <p class="ti-3">网络直播用户6.38 亿</p>
        </div>
      </div>
      <ul>
        <li class="li-1">
          <p>咨询热线</p>
          <p>400-831-0818</p>
        </li>
        <li class="li-2">
          <img src="../../assets/imgs/图层 43.png" alt="" />
          <div class="li-o">
            <p>抖音</p>
            <p>日活用户超6亿</p>
            <p>搜索用户超6亿</p>
          </div>
        </li>
        <li class="li-3">
          <img src="../../assets/imgs/图层 42.png" alt="" />
          <div class="li-o">
            <p class="ks">快手</p>
            <p>日活用户2.93亿</p>
            <p>搜索用户2.5亿</p>
          </div>
        </li>
        <li class="li-4">
          <img src="../../assets/imgs/图层 44.png" alt="" />
          <div class="li-o">
            <p class="bd">百度</p>
            <p>日活用户超6亿</p>
            <p>搜索用户超5.58亿</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="liuliang">
      <h2>流量精准投放</h2>
      <ul>
        <li>
          <img src="../../assets/imgs/11.png" alt="" />
          <p>定向</p>
          <p>
            精准客户群体,专业的引流服务平台,让您的产品更加精准。
            <!-- 精准客户群体,专业的引流服务平台,让您的产品更加精准且效果成正比的广告。 -->
          </p>
        </li>
        <li>
          <img src="../../assets/imgs/22.png" alt="" />
          <p>出价/推广预算</p>
          <p>
            计费机制点击价格不超过您的出价，为您尽可能地节省推广预算。
            <!-- 计费机制保证实际点击价格不超过您的出价，为您尽可能地节省推广预算。 -->
          </p>
        </li>
        <li>
          <img src="../../assets/imgs/33.png" alt="" />
          <p>用户表单</p>
          <p>不必填、分层表单、结合业务场 景需求，构建动态标签,附加创意。</p>
        </li>
        <li>
          <img src="../../assets/imgs/44.png" alt="" />
          <p>广告投放分析</p>
          <p>
            打通广告与站内用户 转化数据，全链路监测，提升投放 ROI。
            <!-- 打通广告“展、点、消”与站内用户 转化数据，全链路监测，提升投放 ROI -->
          </p>
        </li>
        <li>
          <img src="../../assets/imgs/55.png" alt="" />
          <p>投放时段</p>
          <p>
            在你设置的时间段内会显示你的广告，投放时段是为了合理控制消费
            <!-- 投放时间段是在你设置的时间段内才会显示你的广告，设置投放时间段是为了合理控制消费 -->
          </p>
        </li>
        <li>
          <img src="../../assets/imgs/66.png" alt="" />
          <p>互动指标</p>
          <p>
            我们把用户对视频除了播放之外的其它动作都可以称之为互动
            <!-- 我们把用户对视频除了播放之外的其它动作都可以称之为互动，依次为:点赞、收藏、评论、弹幕、分享 -->
          </p>
        </li>
        <li>
          <img src="../../assets/imgs/77.png" alt="" />
          <p>广告来源</p>
          <p>行业资源,探迹拓客-全网企业资源快速找到意向客户，让销售更简单</p>
        </li>
        <li>
          <img src="../../assets/imgs/88.png" alt="" />
          <p>丰富素材</p>
          <p>视频、图片、各类精品实拍素材通过整 合加工快速提高你的投放效率</p>
        </li>
      </ul>
    </div>
    <div class="zhichi">
      <h2>房象科技伙伴支持</h2>
      <ul>
        <li>
          <img src="../../assets/imgs/图层 46.png" alt="" />
          <div>
            <h3>我们期待的伙伴是这样的</h3>
            <p>具备互联网思维，具有转型升级的意愿</p>
            <p>公司具有一定的流量投放实力</p>
            <p>团队销售转化能力较强</p>
            <p>公司规模30-100人，管理规范，有较多分销渠道关系</p>
          </div>
        </li>
        <li>
          <img src="../../assets/imgs/图层 45.png" alt="" />
          <div>
            <h3>房象科技的伙伴成功支持</h3>
            <p>组建渠道经理+运营专案团队，助力伙伴快速走向正轨</p>
            <p>提供系统的互联网数字化营销培训，帮助建立流量新思维</p>
            <p>云SaaS系统端口开放，为销售全线赋能</p>
            <p>丰富营销手段方式，不断打开增长空间</p>
          </div>
        </li>
      </ul>
    </div>

    <footer-nav></footer-nav>
  </div>
</template>

<script>
import HeaderNav from "../../components/Header.vue";
import FooterNav from "../../components/Footer.vue";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  data() {
    return {
      property: "value",
    };
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.join {
  overflow: hidden;
  .jiaimg {
    width: 100%;
    height: 600px;
  }
  .content {
    background: #f1f1f1;
    padding: 80px 360px;
    .to {
      display: flex;
      .to-1 {
        .title {
          width: 250px;
          font-size: 20px;
          font-weight: bold;
          line-height: 35px;
        }
        .gang-1 {
          width: 120px;
          height: 4px;
          background: #011949;
          margin: 8px 0 40px;
        }
        .ti-1 {
          color: #7c7c7c;
          font-size: 15px;
        }
      }
      .to-2 {
        margin-left: 120px;
        color: #011949;
        .ti-2 {
          position: relative;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 40px;
          &::before {
            position: absolute;
            content: "";
            width: 0;
            left: -20px;
            top: 15px;
            height: 0;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-top: 5px solid #011949;
          }
        }
        .ti-3 {
          margin-bottom: 5px;
          font-size: 15px;
        }
      }
    }
    ul {
      list-style: none;
      display: flex;
      align-items: center;
      margin-top: 60px;
      li:not(:first-child) {
        display: flex;
        align-items: center;
        margin-left: 150px;
        img {
          width: 57px;
          height: 57px;
        }
        .li-o {
          margin-left: 20px;
          p:nth-of-type(1) {
            font-size: 20px;
            font-weight: bold;
          }
          p:nth-of-type(2) {
            font-size: 14px;
            margin-top: 7px;
            color: #170b1a;
          }
          p:nth-of-type(3) {
            font-size: 14px;
            margin-top: 4px;
          }
          .ks {
            color: #ff4906;
          }
          .bd {
            color: #306cff;
          }
        }
      }
      .li-1 {
        padding: 10px 40px;
        background: #011949;
        color: #fff;
        border-radius: 3px;
        p:nth-of-type(2) {
          margin-top: 8px;
        }
      }
    }
  }
  .liuliang {
    padding: 50px 0;
    background: #f8fbfd;
    h2 {
      font-size: 22px;
      font-weight: bold;
      text-align: center;
    }
    ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      list-style: none;
      text-align: center;
      width: 59%;
      margin: 50px auto auto;
      li {
        width: 230px;
        margin-bottom: 30px;
        img {
          width: 60px;
          height: 60px;
        }
        p:nth-of-type(1) {
          font-weight: bold;
          margin: 10px 0;
        }
        p:nth-of-type(2) {
          font-size: 15px;
          color: #444;
          line-height: 28px;
          text-align: left;
        }
      }
    }
  }
  .zhichi {
    margin-top: 50px;
    text-align: center;
    ul {
      width: 60%;
      display: flex;
      justify-content: space-around;
      list-style: none;
      margin: 60px auto;
      li {
        display: flex;
        align-items: center;
        box-shadow: 0px 0px 5px 2px #ecebec;
        padding: 30px;
        border-radius: 5px;
        img {
          width: 65px;
          height: 70px;
        }
        div {
          margin-left: 15px;
          h3 {
            text-align: left;
            margin-bottom: 20px;
          }
          p {
            text-align: left;
            margin-bottom: 12px;
            font-size: 14px;
            position: relative;
            left: 20px;
            color: #616061;
            &::before {
              position: absolute;
              content: "";
              width: 13px;
              height: 10px;
              top: 5px;
              left: -20px;
              background-image: url(../../assets/imgs/图层299.png);
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  .video {
    width: 40%;
    height: 450px;
    margin: 50px auto;
    // border: 1px solid red;
    embed {
      width: 100%;
      height: 100%;
    }
  }
}
@media screen and (max-width: 1024px) {
  .join {
    .jiaimg {
      width: 100%;
      height: 745px;
    }
    .content {
      background: #f1f1f1;
      padding: 80px 140px;
      .to {
        display: flex;
        .to-1 {
          .title {
            width: 600px;
            font-size: 75px;
            font-weight: bold;
            line-height: 105px;
          }
          .gang-1 {
            width: 0px;
            height: 4px;
            background: #011949;
            margin: 8px 0 40px;
          }
          .ti-1 {
            margin-bottom: 15px;
            color: #7c7c7c;
            font-size: 55px;
          }
        }
        .to-2 {
          margin-left: 120px;
          color: #011949;
          .ti-2 {
            position: relative;
            font-size: 74px;
            font-weight: bold;
            margin-bottom: 40px;
            &::before {
              position: absolute;
              content: "";
              width: 0;
              left: -90px;
              top: 35px;
              height: 0;
              border-right: 25px solid transparent;
              border-left: 25px solid transparent;
              border-top: 25px solid #011949;
            }
          }
          .ti-3 {
            margin-bottom: 5px;
            font-size: 55px;
          }
        }
      }
      ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // align-items: center;
        margin-top: 60px;
        li:not(:first-child) {
          position: relative;
          display: flex;
          align-items: center;
          margin-left: 0px;
          margin-top: 90px;
          img {
            position: absolute;
            top: -30px;
            left: 30px;
            width: 127px;
            height: 127px;
          }
          .li-o {
            margin-left: 40px;
            color: #616061;
            p:nth-of-type(1) {
              font-size: 70px;
              font-weight: bold;
              margin-left: 140px;
            }
            p:nth-of-type(2) {
              font-size: 50px;
              margin-top: 27px;
            }
            p:nth-of-type(3) {
              font-size: 50px;
              margin-top: 24px;
            }
            .ks {
              color: #ff4906;
            }
            .bd {
              color: #306cff;
            }
          }
        }
        .li-1 {
          width: 100%;
          padding: 60px 0px;
          background: #011949;
          text-align: center;
          color: #fff;
          font-size: 70px;
          border-radius: 13px;
          p {
            display: inline;
          }
        }
      }
    }
    .liuliang {
      padding: 90px 0;
      background: #f8fbfd;
      h2 {
        font-size: 92px;
        font-weight: bold;
        text-align: center;
      }
      ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        list-style: none;
        text-align: center;
        width: 92%;
        margin: 90px auto auto;
        li {
          width: 40%;
          margin-bottom: 50px;
          img {
            width: 210px;
            height: 220px;
          }
          p:nth-of-type(1) {
            font-weight: bold;
            font-size: 65px;
            margin: 40px 0;
          }
          p:nth-of-type(2) {
            font-size: 55px;
            color: rgb(102, 101, 101);
            line-height: 95px;
            text-align: left;
          }
        }
      }
    }
    .zhichi {
      margin: 90px 0;
      text-align: center;
      h2 {
        font-size: 92px;
        margin-bottom: 110px;
      }
      ul {
        width: 85%;
        display: block;
        justify-content: space-around;
        list-style: none;
        margin: 60px auto;
        li {
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 45px 15px #e0dfe0;
          padding: 60px;
          margin-bottom: 50px;
          border-radius: 15px;
          img {
            width: 195px;
            height: 190px;
          }
          div {
            margin-left: 65px;
            h3 {
              text-align: left;
              margin-bottom: 60px;
              font-size: 75px;
            }
            p {
              width: 85%;
              text-align: left;
              margin-bottom: 22px;
              font-size: 54px;
              color: #616061;
              position: relative;
              line-height: 90px;
              left: 60px;
              &::before {
                position: absolute;
                content: "";
                width: 53px;
                height: 50px;
                top: 15px;
                left: -70px;
                background-image: url(../../assets/imgs/图层299.png);
                background-size: 100% 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>